<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	.box{
		width: 50PX; height: 50PX; background: #cccccc; margin: 10px auto;
	}
</style>
		<div class="box">1小</div></br>
		<div class="box">2小</div></br>
		<div class="box">3小</div>
		
		
</head>
<body>
	<script>
		//闭包函数的学习
		//获取数组 元素
		var boxs=document.getElementsByClassName('box');
		for(let box of boxs){ //强制执行 子线程走 不会异步
			//for(var box of boxs){
				
				box.onclick=function(){
					//可以变大变小 不能变粗
					if(box.innerHTML=="小"){
						box.style.width="100px";
						box.style.height="100px";
						box.innerHTML="大";
					}else{ //以下是改变大小
						box.style.width="50px";
						box.style.height="50px";
						box.innerHTML="小";
					}
					
				};

		}
		
		
		
		
		
		
		
		
		
	// 	for(let box of boxs){ //强制执行 子线程走 不会异步
	// 	//for(var box of boxs){
		
	// 		box.onclick=function(){
	// 			this.style.width="100px";
	// 			this.style.height="100px";
	// 			this.innerHTML="大";
				
	// 		};
				

	// }
	</script>
</body>
</html>

